<template>
    <div class="box">
        <heads title="购物车"></heads>
        <template v-if="listq.length > 0">
            <van-swipe-cell v-for="(v, i) in listq" :key="i">
                <van-card :price="v.goods_price" :title="v.goods_name" thumb="">
                    <template #thumb>
                        <div style="display: flex;align-items: center;">
                            <van-checkbox v-model="v.checked"></van-checkbox>
                            <img style="width: 6rem;height: 6rem;"
                                :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                alt="" srcset="">
                        </div>
                    </template>
                    <template #footer>
                        <van-stepper v-model="v.num" />
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="delFun(i)" />
                </template>
            </van-swipe-cell>
        </template>
        <template>
            <van-empty description="暂无数据" />
        </template>
    </div>
    <van-submit-bar :price="price * 100" button-text="去结算" @submit="onSubmit" style="bottom: 5rem;">
        <van-checkbox v-model="checkedAll" @click="checkedAllFun()">全选</van-checkbox>
    </van-submit-bar>

</template>

<script setup>
import { ref, computed } from "vue"
const checked = ref(true);
import { showToast } from 'vant';
const value = ref(1);
import { createApi } from "@/api/api"
import heads from '@/components/head.vue';
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
let listq = ref(store.shopaa)

const delFun = (i) => {
    listq.value.splice(i, 1)
}

const price = computed(() => {
    let sum = 0;
    listq.value.forEach((v) => {
        if (v.checked) {
            sum += v.num * v.goods_price
        }
    })
    return sum
})

const checkedAll = computed(() => {
    return listq.value.every((v) => v.checked)
})

const checkedAllFun = () => {
    let flag = checkedAll.value;
    listq.value.forEach((v) => {
        v.checked = !flag;
    })
}

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const onClickLink = () => showToast('修改地址');
const onSubmit = () => {
     let arr=listq.value.filter((v)=>v.checked)
    if (arr.length > 0) 
    {
        let obj={
             goodsIds:arr.map((v)=>v.goods_id).join(''),
             username:localStorage.getItem('username'),
             product_code:arr.map((v)=>v.goods_name).join(''),
             totalPrice:price.value,
             nums:arr.map((v)=>v.num).join('')
        }
        createApi(obj).then(res=>{
            if(res.data.code==0)
            {
                router.push({path:'/order',query:{orderId:res.data.data.orderId}})
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.box {
    overflow: auto;
}

.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}
</style>